<template>
	<view class="labels">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-编辑-商品标签</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<view>
				<image src="../../static/home/sousuo.png" mode=""></image>
				<view>搜索原料</view>
			</view>
		</view>
		<!-- 选择原料 -->
		<view class="material">
			选择原料
		</view>
		
		<!-- 谷类及制品 -->
		<view class="Cereals">
			 <view @tap="istrue">
				 <view>谷类及制品</view>
				 <image src="../../static/management/jiantou3.png" mode=""></image>
			 </view>
		</view>
		
		<u-popup v-model="show" mode="center" length="85%">
			<view class="TimeDate">
				<view>选择原料</view>
				<view>
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox active-color="#35394C" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
							{{ item.name }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="cancel">  
					<view>取消</view>
					<view>确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>  
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			show:false,
			list: [
				{
					name: '小麦',
					
				},
				{
					name: '小麦粉',
					
				},
				{
					name: '挂面',
					
				},
				{
					name: '面条',
					
				},
				{
					name: '切面',
					
				},
				{
					name: '通心粉',
					
				},
				{
					name: '意大利面',
					
				}
			],
			dayeTime:""
		};
	},
	components: {
		statusBar
	},
	methods:{
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		istrue(){
			this.show = true
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			console.log(e,2222999)
			this.dayeTime = e[0];
			console.log(this.dayeTime);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			console.log(e,2222999)
			this.dayeTime = e[0];
			console.log(this.dayeTime);
		},
		
	}
};
</script> 
<style lang="scss" scoped>
	.labels{
		/deep/.u-checkbox-group {
			display: grid !important;
		}
		/deep/.u-checkbox {
			line-height: 3.8 !important;
		}
		/deep/.u-checkbox__label {
			margin-left: 59upx !important;
			font-size: 30upx !important;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1) !important;
		}
		.nav {
			display: flex;
			align-items: center;
			padding: 50upx 30upx 30upx 30upx;
			background: $bg1-color;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
		
			image {
				width: 27upx;
				height: 30upx;
				display: flex;
			}
			& > view {
				font-size: 34upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg2-color;
				margin-left: 30upx;
			}
		}
		.search {
			// 微信小程序
			/* #ifdef  MP-WEIXIN */
		
			padding-top: 100upx;
			/* #endif */
			// 手机端
			/* #ifdef APP-PLUS */
			padding-top: 100upx;
			/* #endif */
			// H5端
			/* #ifdef  H5 */
			padding-top: 150upx;
			/* #endif */
			border-bottom: 1upx solid #EDF0FA;
			padding-bottom: 20upx;
			 &>view:nth-child(1){
				 width: 90%; 
				 margin: 0 auto;
				 background: #FFFFFF;
				 padding: 24upx 0upx 24upx 24upx;
				 border-radius:4upx;
				 text-align: center;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 image{
					 width: 38upx;
					 height: 38upx;
					 display: flex;
					 margin-right: 15upx;
				 }
				 &>view{
					 font-size:32upx;
					 font-family:Source Han Sans CN;
					 font-weight:400;
					 color:#333333;
					
				 }
			 }
		
			}
       .material{
		   font-size:28upx;
		   font-family:Source Han Sans CN;
		   font-weight:400;
		   color:#999999;
		   padding: 47upx 40upx 16upx; 
		   border-bottom: 1upx solid #EDF0FA;
	   }
	   .Cereals{
		   background: #FFFFFF;
		   height: 77vh;
		   &>view:nth-child(1){
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   border-bottom: 1upx solid #EDF0FA;
			   padding: 36upx 40upx 32upx 0upx;
			   width: 90%;
			   margin-left: auto;
			   &>view:nth-child(1){
				   font-size:32upx;
				   font-family:Source Han Sans CN;
				   font-weight:400;
				   color:#333333;
			   }
			   image {
			   			width: 27upx;
			   			height: 30upx;
			   			display: flex;
			   		}
		   }
		   
	   }
	   .TimeDate {
	   	padding: 48upx 51upx 48upx 51upx;
	   	& > view:nth-child(1) {
	   		font-size: 42upx;
	   		font-family: Source Han Sans CN;
	   		font-weight: 400;
	   		color: rgba(51, 51, 51, 1);
	   	}
	   	.cancel {
	   		display: flex;
	   		align-items: center;
	   		justify-content: flex-end;
	   		& > view {
	   			font-size: 36upx;
	   			font-family: Source Han Sans CN;
	   			font-weight: 400;
	   			color: #333333;
	   			width: 100upx;
	   		}
	   	}
	   }
	} 
</style>